<template>
    <div id="app" class="a-container">
        <div class="table">
            <div class="g001 g001-row">
                <div>不良问题描述:</div>
                <div style="display: flex;justify-content: flex-end;padding-right: 8em">品检员:</div>
            </div>

            <div class="g004">不良处理方式: </div>
            <div class="g005">责任部门: </div>
            <div class="g002 g002-row">
                <span>组别:</span>
                <el-checkbox-group v-model="checkGroupList">
                    <el-checkbox label="A"></el-checkbox>
                    <el-checkbox label="B"></el-checkbox>
                    <el-checkbox label="C"></el-checkbox>
                    <el-checkbox label="D"></el-checkbox>
                    <el-checkbox label="E"></el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="g006">
                <span>责任人: </span>
            </div>
            <div class="g007">
                <span>品管组长/QE:</span>
            </div>
            <div class="g008 g008-row" style="writing-mode : tb-rl;">
                <span>车间处理</span>
            </div>
            <div class="g009 r2 g009-row">
                <span style="width: 6em">原因分析: </span>
                <el-input v-model="form.causeAnalysis" size="medium"></el-input>
            </div>
            <div class="g010">
                <span>回复人: </span>
            </div>
            <div class="g011 r2">
                <span>处理措施: </span>
            </div>
            <div class="g012 r2">
                <span>预防措施:</span>
            </div>
            <div class="g013">
                <span>回复时间:</span>
            </div>

        </div>

        <el-button @click="handlePrint" class="no-print">打 印</el-button>
        <Category title="美食" >
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        <div>
            <Image-Upload-Base64 v-model="searchImage">
                <el-button>上 传</el-button>
            </Image-Upload-Base64>
        </div>
        <el-image src=""></el-image>
    </div>
</template>

<script>
module.exports = {
    name: "App",
    components: {
        ImageUploadBase64: 'url:/components/ImageUploadBase64.vue',
        Category: 'url:/components/Category.vue'
    },
    data() {
        return {
            form: {
                causeAnalysis: ''
            },
            checkGroupList: [],
            searchImage: undefined
        }
    },
    methods: {
        handlePrint() {
            window.onafterprint = (event) => {
                console.log("打印后", event);
            };

            print();
        }
    }

}
</script>

<style scoped>

@media print{
    .no-print{visibility:hidden ;}
}

.a-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.table {
    /*break-after: page;*/
    page-break-inside: avoid;
    width: 100%;
    border-right: 1px solid;
    border-bottom: 1px solid;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "g001 g001 g001 g001 g001 g001"
        "g004 g004 g004 g004 g004 g004"
        "g005 g002 g002 g002 g006 g007"
        "g008 g009 g009 g009 g009 g010"
        "g008 g011 g011 g011 g011 g010"
        "g008 g012 g012 g012 g012 g013"
    ;
}

.g001-row {
    display: grid;
}
.g002-row {
    display: flex;
    align-items: center;
    gap: 1em;
}
.g008-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.g009-row {
    display: flex;
    align-items: center;
}
.table > div {
    padding: 4px;
    border-top: 1px solid;
    border-left: 1px solid;
}


.el-checkbox__inner {
    border-color:black;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: none;
    border-color:black;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after {
    content: '\2714';  /* 设置选中后的✓符号*/
    transform:none;
    top: -8px;
    height: 0;
    left: 0px;
    font-size: 2em;
}

</style>
